<template>
    <div   v-bind:style="{height:activityHeight}">
            <div class="workGroup">
                <!-- 組内信息 -->
                <Row>
                    <Col span="7">
                        <div class="workGroupNav" v-bind:style="{height:GroupHeight}">
                            <span>组内信息</span>
                            <p >出勤情况如下：</p>
                            <p >未出勤：1人</p>
                            <p >迟到：0人</p>
                            <p >早退：0人</p>
                        </div>
                    </Col>
                    <!-- 關鍵KPI -->
                    <Col span="16" offset="1">
                        <p class="workGroupTit">关键KPI</p>
                         <Table :height="workGroupNavHeight" :columns="workGroupcolumns" :data="workGroupdata" ></Table>
                    </Col>
                </Row>
            </div>

           <div class="workPageMaker">
               <!-- 排班信息 -->
                <Row>
                    <Col span="7">
                        <div class="workPageMakerNav" v-bind:style="{height:PageMakerHeight}">
                            <span>排班信息</span>
                            <p style="word-break:break-word;">今日员工生日:{{birthdayToday}}</p>
                            <p style="word-break:break-word;">明日员工生日:{{birthdayTomorrow}}</p>
                            <p>今日班次:{{todayClassType}}</p>
                            <DatePicker type="date" placeholder="查看其他班次"  style="width: 90%"  :size="pickerSize" :confirm="PickerConfirm" :editable="PickerEditable" @on-change="searchClassGrade"></DatePicker>
                        </div>
                    </Col>
                    <!-- 工單信息 -->
                    <Col span="16" offset="1">
                            <p class="workGroupTit">工单信息</p>
                            <Table :height="workPageMakerHeight" :columns="workPageMakercolumns" :data="workPageMakerdata"></Table>
                    </Col>
                </Row>
            </div>
             <!-- 员工登录信息 -->
            <div class="workLogin">
                <p class="workLoginTit">员工登录信息</p>
                <Table :height="workLoginHeight" :columns="workLogincolumns" :data="workLogindata"></Table>
            </div>


    </div>

</template>
<style scoped>
.workGroup {
  height: 29%;
  margin-bottom: 10px;
}
.workGroupNav {
  width: 100%;
  height: 147px;
  border: 1px solid #e9eaec;
}
.workGroupNav span {
  width: 100%;
  padding: 0px;
  color: #ffffff;
  background-color: #f85415;
  border-bottom: 1px solid #e9eaec;
  display: block;
  margin-bottom: 3px;
}
.workGroupNav p {
  text-align: left;
  padding-left: 20px;
}
.workGroup .workGroupTit {
  color: aliceblue;
  height: 20px;
  border: 1px solid #bfbfbf;
  background-color: #f85415;
}
.workPageMaker {
  height: 39%;
  margin-bottom: 15px;
}
.workPageMakerNav {
  width: 100%;
  height: 207px;
  border: 1px solid #e9eaec;
  overflow-y: auto;
}
.workPageMakerNav span {
  width: 100%;
  padding: 0px;
  color: #ffffff;
  background-color: #f89515;
  border-bottom: 1px solid #e9eaec;
  display: block;
  margin-bottom: 3px;
}
.workPageMakerNav p {
  text-align: left;
  padding-top: 10px;
  padding-left: 20px;
  padding-bottom: 15px;
}
.workPageMaker .workGroupTit {
  color: aliceblue;
  height: 20px;
  border: 1px solid #bfbfbf;
  background-color: #f89515;
}
.workLogin {
  height: 29%;
}
.workLogin .workLoginTit {
  color: aliceblue;
  height: 20px;
  border: 1px solid #bfbfbf;
  background-color: #0fab64;
}
</style>
<script>
 import homeService from "service/homeService.js";
 import {
   mapGetters
 } from 'vuex'
    export default {
        name: 'main',
        data () {
            return {
                screenWidth: document.body.clientWidth,
                pickerSize:'large',
                PickerConfirm:true,
                PickerEditable:false,
                workGroupNavHeight:'130',
                workPageMakerHeight:'150',
                workLoginHeight:'170',
                GroupHeight:'200',
                PageMakerHeight:"",
                activityHeight:'0px',
                // 排班信息
                classInfo:"",
                todayClassType:"暂无",
                birthdayToday:"无",
                birthdayTomorrow:"无",
                // workGroup
                workGroupcolumns: [
                    {
                        title: '24小时首解',
                        key: 'name'
                    },
                    {
                        title: '产能',
                        key: 'age'
                    },
                    {
                        title: '满意度',
                        key: 'address'
                    }
                ],
                workGroupdata: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    },
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ],
                //abstract
                workPageMakercolumns: [
                    {
                        title: '标记量',
                        key: 'age'
                    },
                    {
                        title: '结案量',
                        key: 'address'
                    },
                    {
                        title: '待处理量',
                        key: 'num'
                    }

                ],
                workPageMakerdata: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        num: '2016-10-03'

                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        num: '2016-10-03'
                    },
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        num: '2016-10-03'
                    }
                ],
                workLogincolumns: [
                     {
                        title: '员工姓名',
                        key: 'name'
                    },
                    {
                        title: '登陆时长',
                        key: 'name'
                    },
                    {
                        title: '呼入总时长',
                        key: 'age'
                    },
                    {
                        title: '呼出总时长',
                        key: 'age'
                    },
                    {
                        title: '小休时长',
                        key: 'address'
                    },
                    {
                        title: '空闲时长',
                        key: 'num'
                    },
                    {
                        title: '呼入量',
                        key: 'num'
                    },
                    {
                        title: '呼出量',
                        key: 'num'
                    }

                ],
                workLogindata: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',


                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    }
                ]
            }
        },
      computed: {
        ...mapGetters({
          loginUserInfo: 'loginUserInfo',
        }),
      },
        methods:{
            makeHeight(){
                let winHeight=0;
                let _this=this;

                if (window.innerHeight)
                winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
                // 通过深入 Document 内部对 body 进行检测，获取窗口大小
                if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
                {
                winHeight = document.documentElement.clientHeight;
                // winWidth = document.documentElement.clientWidth;
                }

                _this.activityHeight=winHeight-90-90+"px";
                _this.workGroupNavHeight =  (winHeight-90-90)*0.29-15;
                _this.GroupHeight = (winHeight-90-90)*0.29+"px";
                _this.workPageMakerHeight =  (winHeight-90-90)*0.39-15;
                _this.PageMakerHeight = (winHeight-90-90)*0.39+"px";
                _this.workLoginHeight =  (winHeight-90-90)*0.28-15;
                return winHeight;
            },
            async classLeaderGradeInfo(data) {
                if(!this.loginUserInfo.userId){
                return false;
                }
                let vm= this;
                var date = data ? data :vm.getTodayDate()
                let jsondata = await homeService.classLeaderGradeInfo({
                    groupLeaderUserId:  vm.loginUserInfo.userId
                })
                vm.classInfo= jsondata;
                if(vm.classInfo){
                    if(jsondata.classArrangeInfo){
                      vm.todayClassType=jsondata.classArrangeInfo.classesName;
                    }
                    if(jsondata.birthdayToday && jsondata.birthdayToday!= "[]"){
                       vm.birthdayToday=jsondata.birthdayToday.replace("[","").replace("]","").replace(",","、");
                    }
                    if(jsondata.birthdayTomorrow && jsondata.birthdayTomorrow!= "[]"){
                       vm.birthdayTomorrow=jsondata.birthdayTomorrow.replace("[","").replace("]","").replace(",","、");
                    }
                }
            },
            searchClassGrade(response){
                this.classLeaderGradeInfo(response)
            },
            getTodayDate(){
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                return currentdate;
            }
        },
        watch: {
            screenWidth (val) {
                if (!this.timer) {
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        // that.screenWidth = that.$store.state.canvasWidth
                        console.log(that.screenWidth)
                        that.init()
                        that.timer = false
                    }, 400)
                }
            },
            loginUserInfo(newVal, oldVal) {
                this.classLeaderGradeInfo()
            }
        },
        mounted(){
            this.makeHeight();
            this.classLeaderGradeInfo();
            const that = this
            window.onresize = () => {
                return (() => {
                    // window.screenWidth = document.body.clientWidth
                    // that.screenWidth = window.screenWidth
                     this.makeHeight();
                })()
            }

        }
    }
</script>
